<template>
	<view class="card">
		<view class="title">
			<view  class="title-week">
				{{ week }}周
			</view>
			<view class="title-content">
				{{className || classes || courseTitle}}
			</view>
		</view>
		<view class="address">
			{{roomName || buildings + ' ' + room}}
		</view>
		<view class="redmik">
			<view class="time">
				2019/12/08
			</view>
			<view class="charge">{{ teacher }}</view>
		</view>
		<view class="touch">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			responsibleName:{
				type: String
			},
			responsibleNumber:{
				type: String
			},
			roomName:{
				type: String
			},
			week:{
				type: Number
			},
			teacherName:{
				type: String
			},
			teacherNumber:{
				type: String				
			},
			className:{
				type: String
			},
			buildings:{
				type: String
			},
			room:{
				type: Number
			},
			classes:{
				type: String
			},
			classTeacheres:{
				type: String
			},
			courseTitle:String,
		},
		data() {
			return {
				color: ''
			};
		},
		computed:{
			teacher(){
				if(this.teacherName && this.teacherNumber){
					return this.teacherName + '@' + this.teacherNumber
				} 
				if(this.responsibleName && this.responsibleNumber){
					return this.responsibleName + '@' + this.responsibleNumber
				}
				return this.classTeacheres
			}
		},
		mounted() {
			this.color = this.$parent.$attrs.color
		}
	}
</script>

<style lang="scss" scoped>
.card{
	position: relative;
	width: 100%;
	height: 150px;
	background:rgba(248,248,251,1);
	border-radius:10px;
	box-sizing: border-box;
	font-family:PingFang SC;
	padding: 12px;
	margin-bottom: 20px;
	&::after{
		content: '';
		position: absolute;
		left: 0px;
		bottom: 44px;
		height:1px;
		width: 100%;
		background:rgba(241,241,241,1);
	}
	.touch{
		display: flex;
		height: 44px;
		width: 90%;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		bottom: 0px;
	}
	.redmik{
		display: flex;
		font-weight: bold;
		.time{
			font-size:12px;
			padding-right: 15px;
			color:rgba(57,66,91,1);
		}
		.charge{
			font-size:12px;
			color:rgba(57,66,91,1);
		}
	}
	.address{
		width: 100%;
		font-size:12px;
		font-weight:500;
		color:rgba(57,66,91,1);
		padding: 12px 0px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.title{
		display: flex;
		font-weight:bold;
		align-items: center;
		.title-content{
			font-size:14px;
			color:rgba(57,66,91,1);
		}
		.title-week{
			width:37px;
			height:17px;
			margin-right: 10px;
			line-height: 17px;
			background:rgba(58,94,254,1);
			border-radius:5px 5px 5px 2px;
			text-align: center;
			font-size:11px;
			color:rgba(254,254,253,1);
		}
	}
}
</style>
